<template>
  <div class="home" style="height:100%">
    <van-search
      v-model="searchCount"
      placeholder="请输入搜索关键词"
      show-action
      @search="onSearch"
    >
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>
    <div class="historys">
      <h3>搜索记录</h3>
    </div>
      <van-button size="small" type="primary" round  v-for="j in history" :key="j" style="margin:5px" @click="href('',j)">{{j}}</van-button>
     <div class="historys">
      <h3>热门搜索</h3>
    </div>
    <van-tabs v-model="active" swipeable=true >
      <van-tab v-for="i in hotSearch" :title="i.name" :key="i.tab" style="margin-top:10px">
        <van-button size="small" type="primary" round  v-for="j in i.list" :key="j" style="margin:5px" @click="href(i.tab,j)">{{j}}</van-button>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
// @ is an alias to /src
import { getHistory, getImei, getHotSearch, search } from "../api/getHistory";

export default {
  name: "home",
  data: function() {
    return {
      src: "",
      searchCount: "",
      hotSearch:[],
      history:[]
    };
  },
  components: {},
  mounted() {
    if (localStorage.Imei) {
      getHistory(localStorage.Imei).then(data => {
        this.history = data.data.data
      });
    } else {
      getImei().then(data => {
        localStorage.Imei = data.data;
        getHistory(localStorage.Imei).then(data => {
          this.history = data.data.data
        });
      });
    }
    getHotSearch().then(data =>{
      this.hotSearch = data.data
    })
  },
  methods: {
    onSearch() {
      search(this.searchCount,localStorage.Imei).then((data) =>{
        if(data.data.data){
          this.$router.push(`/detail?name=${data.data.data.name}&key=${data.data.data.type}`)
        }else{
           this.$toast.fail('查询内容不存在');
        }
      })
    },
    href(tab,name){
      if(tab){
        this.$router.push(`/detail?name=${name}&key=${tab}`)
      }else{
        this.$router.push(`/detail?name=${name}`)
      }
      
    },
  }
};
</script>
<style lang="scss" scoped>
.home{
  background: #ffffff;
}
.historys{
  width: 95%;
  margin: 0 auto;
  margin-top: 20px;
  h3{
    font-size: 16px;
    line-height: 32px;
    margin-top: 10px;
    margin-left: 10px;
  }
}
</style>
